<template>
	<view style="position: relative;">
		<view class="chatList" :style="{height:height+'px'}">
			<view style="width: 100%;margin: 20rpx 0;padding-bottom:10rpx;" v-for="item in list" :key="item.uid">
				<view class="chat-left" v-if="item.type==='2'">
					<img class="avatar" :src="itemC.expertFace" alt="">
					<view class="chat-left-msg">
						<view class="chat-msg">
							{{item.msgContent}}
						</view>
						<view class="chat-time">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="chat-right" v-if="item.type==='1'">
					<view class="chat-right-msg">
						<view class="chat-msg">
							{{item.msgContent}}
						</view>
						<view class="chat-time">
							{{item.createTime}}
						</view>
					</view>
					<img class="avatar" :src="avatar" alt="">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			height:0,
			list:[],
			avatar:uni.getStorageSync('avatarUrl') ? uni.getStorageSync('avatarUrl') : '/static/logo.png',
		}
	},
	onLoad(params){
		this.list = JSON.parse(params.str);
		this.avatar = uni.getStorageSync('avatarUrl')
		const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
		this.height = (windowHeight - 68)
	},
	methods: {
		
	}
}
</script>

<style lang="scss" scoped>
	.chatList {
		width: 730rpx;
		padding: 10rpx;
		background: #eee;
	}

	.sendList {
		width: 710rpx;
		position: fixed;
		bottom: 16rpx;
		padding: 20rpx;
	}

	.popup-content {
		padding: 50rpx;
	}

	.popup-item {
		display: flex;
		gap: 30rpx;
		align-items: center;
		margin: 40rpx 0;
	}

	.avatar-img {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #eee;
	}

	.avatar {
		font-size: 28rpx;
		margin-left: 0;
	}

	.chat-left {
		display: flex;
		width: 730rpx;
		gap: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius:40rpx;
		}

		.chat-left-msg {
			.chat-msg {
				position: relative;
			}

			.chat-msg::before {
				position: absolute;
				content: '';
				width: 20rpx;
				height: 20rpx;
				background: #fff;
				transform: rotate(45deg);
				left: -10rpx;
				top: 28rpx;
			}
		}
	}



	.chat-right {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		width: 730rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius:40rpx;
		}

		.chat-right-msg {
			.chat-msg {
				position: relative;
			}

			.chat-msg::before {
				position: absolute;
				content: '';
				width: 20rpx;
				height: 20rpx;
				background: #fff;
				transform: rotate(45deg);
				right: -10rpx;
				top: 28rpx;
			}
		}
	}

	.chat-msg {
		max-width: 400rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.chat-time {
		font-size: 24rpx;
		color: #888;
	}
</style>